<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" lay-filter="search-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户职业</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classify" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <a class="layui-btn" lay-submit="" lay-filter="data-search-btn" @click="search(true)">搜索</a>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <div class="layui-btn-group">
            <button class="layui-btn data-add-btn" @click="add">添加</button>
            <button class="layui-btn data-add-btn" @click="add2">添加到TAB</button>
            <button class="layui-btn data-add-btn" @click="modify(false,null)">修改</button>
            <button class="layui-btn data-add-btn" @click="add" v-text="$t('my_name_label')"></button>
            <button class="layui-btn layui-btn-danger data-delete-btn" @click="remove(false,null)">删除</button>
        </div>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table'], function (){
        // 测试token
        wp.storeToken("token:123123123");

        var form = layui.form, table = layui.table;
        var userFormVm = null;
        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三333'
            },
            mounted:function(){
                var self = this;
                this.grid();

                //监听表格复选框选择
                table.on('checkbox(currentTableFilter)', function (obj) {
                    console.log(obj)
                });

                table.on('tool(currentTableFilter)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        layer.alert('编辑行：<br>' + JSON.stringify(data))
                        self.modify(true,data);
                    } else if (obj.event === 'delete') {
                        layer.confirm('真的删除行么',{icon:3},function (index) {
                            //obj.del();
                            self.remove(true,data.id);
                            self.search();
                            layer.close(index);
                        });
                    }
                });
            },
            methods:{
                grid:function(){
                    var queryParam = form.val("search-form");
                    table.render({
                        elem: '#currentTableId',
                        //url: '/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/api/table.json',
                        url: wp.url('/wp/ewallet/upms/demo/getDemoListPage'),
                        where: {p1: 'xxx',login_name:'admin'},
                        headers:wp.getAjaxHeaders(),
                        parseData:wp.parseGridData,
                        where:queryParam,
                        height: 'full-250',
                        cols: [[
                            {type: "checkbox", width: 50, fixed: "left"},
                            {field: 'id', width: 80, title: 'ID', sort: true},
                            {field: 'name', width: 80, title: '用户名'},
                            {field: 'sex', width: 80, title: '性别'},
                            {field: 'city', width: 80, title: '城市'},
                            {field: 'sign', title: '签名', minWidth: 150},
                            {field: 'experience', width: 80, title: '积分'},
                            {field: 'score', width: 80, title: '评分'},
                            {field: 'classify', width: 80, title: '职业'},
                            {field: 'wealth', width: 135, title: '财富'},
                            {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
                        ]],
                        limits: wp.config.pageList,
                        limit: wp.config.pageSize,
                        page: true
                    });
                },
                add:function(){
                    var self = this;
                    layer.open({
                        type: 2,
                        title: "新增用户",
                        area: ['800px', '500px'],//宽、高
                        content: "user-form.html",
                        success: function(layero, index){
                            // $("#ii")[0].contentWindow
                            //var title = layero.find('iframe')[0]['name'];
                            //var iframeWindow = window[layero.find('iframe')[0]['name']];
                            var iframeWindow = wp.getWindow(layero);
                            //iframeWin.postMessage({id:"123"}, '*');

                           /* alert(window.childVm.name);
                            iframeWindow.userId = 999;
                            iframeWindow.parentVm = self;*/

                            iframeWindow.userVm = self;
                            iframeWindow.index = index;
                            // 窗口关闭方法
                            iframeWindow.close = function(){
                                layer.close(index);
                            }
                            // 父类需要调用子类方法时定义该函数
                            iframeWindow.onLoadFinish = function(vm){
                                userFormVm = vm;
                                console.log(userFormVm.name);
                            }

                            //alert(iframeWindow.vm.name);
                            //alert(iframeWindow.vm);
                            //window.childVm.test();

                           // window[layero.find('iframe')[0]['name']]
                            /*S.handler('save',formLayout).click(function(){
                                if(form.checkFormElements()){
                                    var user_id = S.key('user_id',form).val();
                                    var user_login_name = S.key('user_login_name',form).val();
                                    S.req({
                                        url:'action/ssfast/sys/natural/user/checkName',
                                        params:{'user_id':user_id,'user_login_name':user_login_name},
                                        onSuccess:function(data){
                                            if(data.status == 1){
                                                layer.msg('用户名[' + user_login_name + ']已存在', {time: S.Msg.keeplive});
                                                S.key('user_login_name',form).select();
                                            }else{
                                                var msgIndex = layer.load(S.Icon.loading);
                                                S.submit({
                                                    form:form,
                                                    url:url,
                                                    onSuccess:function(data) {
                                                        layer.close(msgIndex);
                                                        layer.close(index);
                                                        layer.msg('保存成功', {time: S.Msg.keeplive});
                                                        self.dg.loadData();
                                                    }
                                                });
                                            }
                                        }
                                    });
                                }
                            });

                            S.handler('cancel',formLayout).click(function(){
                                layer.close(index);
                            });*/
                        }
                    });
                },
                modify:function(isOne,data){
                    var self = this;
                    var formData = {};
                    if(isOne){
                        formData = data;
                    }else{
                        var checkStatus = table.checkStatus('currentTableId')
                        var rows = checkStatus.data;
                        if(rows.length != 1){
                            layer.msg("请选择一条数据");
                            return;
                        }
                        formData = rows[0];
                    }

                    layer.open({
                        type: 2,
                        title: "修改用户",
                        area: ['800px', '500px'],//宽、高
                        content: "user-form.html",
                        success: function(layero, index){
                            var iframeWindow = wp.getWindow(layero);

                            // 传值到表单子页面
                            iframeWindow.formData = formData;
                            // 当前窗口对象传值到子页面
                            iframeWindow.userVm = self;
                            // 窗口关闭方法
                            iframeWindow.close = function(){
                                layer.close(index);
                            }
                            // 父类需要调用子类方法时定义该函数
                            iframeWindow.onLoadFinish = function(vm){
                                userFormVm = vm;
                                console.log(userFormVm.name);
                            }
                        }
                    });
                },
                add2:function(){
                    var self = this;
                    // 添加到tab
                    var iframeWindow = wp.addTab(wp.resUrl('/wpui-admin/wp-ewallet-admin/module/user/user-form.html'),"用户添加");

                    iframeWindow.userVm = self;
                    // 窗口关闭方法
                    iframeWindow.close = function(){
                        wp.closeTab(iframeWindow.tabId);
                    }
                    iframeWindow.onLoadFinish = function(vm){
                        userFormVm = vm;
                        console.log(userFormVm.name);
                    }
                },
                remove:function(isOne,id){
                    var jsonValue = '[]';
                    if(isOne){
                        jsonValue = '[{"id":"'+ id +'"}]';
                    }else{
                        // 监听删除操作
                        var checkStatus = table.checkStatus('currentTableId')
                        var rows = checkStatus.data;
                        if(rows.length == 0){
                            layer.msg("请至少选择一条数据");
                            return;
                        }
                        jsonValue = wp.buildJsonValue(rows);
                    }

                    alert(jsonValue);
                    wp.httpPost({
                        url:wp.url('/wp/ewallet/upms/demo/removeDemo'),
                        data:{
                            'jsonValue':jsonValue
                        },
                        success:function(data){

                        }
                    })
                },
                search:function(jumpFirst){
                    var queryParam = form.val("search-form");

                    if(jumpFirst){
                        //执行搜索重载
                        table.reload('currentTableId', {
                            page: {curr: 1},
                            where: queryParam
                        });
                    }else{
                        //执行搜索重载
                        table.reload('currentTableId', {
                            where: queryParam
                        });
                    }


                    /*wp.httpGet({
                        url: wp.url('/wp/ppa/upms/demo/getDemoListPage'),
                        data: {
                            page:1,
                            limit:20,
                            p1: 'xxx',
                            login_name:'admin'
                        },
                        success:function(data){
                            var dataBody = data.dataBody;
                            alert(1);

                            table.render({
                                elem: '#currentTableId',
                                /!*cols: [
                                    [{
                                        title: '序号',
                                        type: "numbers"
                                    }, {
                                        field: 'id',
                                        title: 'id',
                                        hide: true
                                    }, {
                                        field: 'status',
                                        title: '状态',
                                        hide: true
                                    }, {
                                        field: 'danjia',
                                        title: '单价(￥)'
                                    }, {
                                        field: 'createtime',
                                        title: '创建时间'
                                    }, {
                                        field: 'status',
                                        title: '状态',
                                        toolbar: '#barstate'
                                    }, {
                                        title: '操作',
                                        toolbar: '#barDemo'
                                    }]
                                ],*!/
                                data: dataBody.list, // 数据
                                limit: 20, // 显示的条数
                                page: true
                            });
                        }
                    });*/
                }
            }
        });
    });
</script>
<script>

</script>

</body>
</html>